<template>
    <div class="mycourse-container">
      <SMycourseSidebar />
      <div class="content-container">
        <h2>以下是为您提供的学习工具。</h2>
          <div class="course-card" @click="router.push('/ai/ai_conversion')">
            <div class="ai-assistant-card">
              <img src="@/assets/svgs/AIBot2.svg" alt="伴学助手" />
              <div>伴学助手</div>
            </div>
          </div>
        </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { useRouter } from 'vue-router';
  import SMycourseSidebar from '@/components/SMycourseSidebar.vue';
  import emitter from '@/utils/eventBus';
  
  const router = useRouter();
  const courses = ref([
    { id: 1, name: '贵大' },
    { id: 2, name: '实训' },
    { id: 3, name: '数学' }
  ]);
  
  const fetchCourseList = async () => {
    try {
      // 这里添加获取课程列表的API调用
      // const response = await api.getCourses();
      // courses.value = response.data;
    } catch (error) {
      console.error('获取课程列表失败:', error);
    }
  };
  
  onMounted(() => {
    console.log('组件已挂载');
    console.log('当前课程数据:', courses.value);
    fetchCourseList();
    
    emitter.on('course-added', () => {
      fetchCourseList();
    });
  });
  
  
  </script>
  
  <style scoped>
  .mycourse-container {
    display: flex;
    width: 100%;
    height: 100%;
  }
  
  .steps-container {
    margin-right: 20px;
  }
  
  .content-container {
    margin-top: 50px;
    flex: 1;
    padding: 0 20px;
  }
  
  .course-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px 0;
    max-width: 1200px;
  }
  
  .course-card {
    aspect-ratio: 1;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    max-width: 250px;
    max-height: 250px;
    font-size: 18px;
    margin: 0;
    width: 100%;
  }
  
  .course-card:not(:has(.ai-assistant-card)) {
    background-color: #f0f0f0;
  }
  
  :deep(.el-step__head.is-process) {
    color: #43a1e4;
    border-color: #43a1e4;
  }
  
  :deep(.el-step__head.is-wait) {
    color: #43a1e4;
    border-color: #43a1e4;
  }
  
  :deep(.el-step__head.is-finish) {
    color: #43a1e4;
    border-color: #43a1e4;
  }
  
  :deep(.el-step__icon.is-text),
  :deep(.el-step__icon-inner) {
    color: #43a1e4;
  }
  
  :deep(.el-step__line) {
    background-color: #43a1e4;
  }
  
  :deep(.el-step__title) {
    color: #43a1e4 !important;
    font-weight: normal !important;
  }
  
  :deep(.el-step__title.is-process),
  :deep(.el-step__title.is-wait),
  :deep(.el-step__title.is-finish) {
    color: #43a1e4 !important;
    font-weight: normal !important;
  }
  
  .ai-assistant-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #9ebedc;
    color: white;
    border-radius: 8px;
  }
  
  .ai-assistant-card img {
    width: 45%;
    height: auto;
    margin-bottom: 10px;
  }
  
  </style>
  